<template lang="html">
    <div class="classify">
        <div class='classif_main'>
            <div class='top_list'>
                <div class='top_title'>全部结果 ></div>
                <div class='top_type' v-show="parentName!=''" @click="topTitle">
                    {{parentName}}
                    <img src="../../assets/img/index/dele.png">
                </div>
            </div>
            <div class='category_list'>
                <div class='parent_list'>
                    <div class='title'>分类：</div>
                    <div class='type'>
                        <a href='javascript:;' @click='goParent(0)'
                           :class='[current_parent_item==0 ? "is_active":""]'>全部</a>

                        <a href='javascript:;' v-for='(item,index) in classificationList'
                           @click='goParent(index+1,item.category_id),parentName=item.name'
                           :class='[current_parent_item==index+1 ? "is_active":""]'>{{item.name}}</a>
                    </div>
                </div>
                <div class='children_list'
                     v-if='is_show  &&  classificationList[current_parent_item-1].child !==undefined'>
                    <div class='title'>子类：</div>
                    <div class='type'>
                        <a href='javascript:;' @click='goChildren(0)'
                           :class='[current_children_item==0 ? "is_active":""]'>全部</a>

                        <a href='javascript:;' v-for='(item,index) in  classificationList[current_parent_item-1].child'
                           @click='goChildren(index+1,item.category_id)'
                           :class='[current_children_item==index+1 ? "is_active":""]'>{{item.name}}</a>

                    </div>
                </div>
                <div class='brand'>
                    <div class='title'>品牌：</div>
                    <div :class="['type',show===true ? 'dip':'sho']">
                        <a href='javascript:;' @click='goBrand(0)'
                           :class='[current_brand_item==0 ? "is_active":""]'>全部</a>

                        <a href='javascript:;' v-for='(item,index) in brandList' @click='goBrand(index+1,item.brand_id)'
                           :class='[current_brand_item==index+1 ? "is_active":""]'>{{item.brand_name}}</a>
                    </div>
                    <div class="open" v-if="!show" @click="open">
                        <el-button icon="el-icon-arrow-down"></el-button>
                    </div>
                    <div class="open openup" v-else @click="open">
                        <el-button icon="el-icon-arrow-up"></el-button>
                    </div>
                </div>
            </div>
            <div class='priceArea'>
                <div class='area'>
                    <span class="moneLeft">￥</span>
                    <input class='money money_left' v-model="minPrice" placeholder=""></input>
                    <div class='line'></div>
                    <span class="moneRight">￥</span>
                    <input class='money money_right' v-model="maxPrice" placeholder=""></input>
                    <div class='ok' @click="moneyArea">确定</div>
                </div>
                <div class='page'>
                    <div>找到<span style='color:red'>{{allCommodity.total}}</span>件商品</div>
                    <div style='margin-left:10px'><span style='color:red'>{{allCommodity.current_page}}</span>/{{allCommodity.last_page}}
                    </div>
                    <div class='butt buttLeft' @click="gopage('prev')">
                        <img src="../../assets/img/index/arrowleft.png">
                    </div>
                    <div class='butt buttRight' @click="gopage('next')">
                        <img src="../../assets/img/index/arrowright.png">
                    </div>
                </div>
            </div>

            <div id="main" >
                <div v-show="loadshow" class="loadingBox">
                    <el-row v-loading="loading"
                            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" >
                        <el-col></el-col>
                    </el-row>
                </div>
                <div class="main_list" v-if="!loadshow && allCommodity.total>0 ">
                    <div class="main_list_list">
                        <div class='main_list_list_individual' v-for='(item,index) in allCommodity.data' :key='index'
                             @click="goTo(`/index/commodity/detail?id=${item.id}`)">
                            <div class="main_list_img">
<!--                                <div class="list_img" :style="{background: 'url('+item.big_img+')'}"></div>-->
                                <img :src="$getImg(item.big_img)" alt="">
                            </div>

                            <div class="main_list_details">
                                <div :title="item.goods_name">
                                    <span class="commodity_type" v-if="item.trade_type_name == '一般贸易'">{{item.trade_type_name}}</span>
                                    <span class="commodity_type bonded" v-if="item.trade_type_name == '保税'">{{item.trade_type_name}}</span>
                                    <span class="commodity_type direct" v-if="item.trade_type_name == '直邮'">{{item.trade_type_name}}</span>

                                    {{item.goods_name}}
                                </div>
                                <!-- <div class="commodity_title">商品信息</div> -->
                                <div class="commodity_title">
                                    <span class="commodity_title">含税：</span>
                                    <span class="commodity_price">￥<span>{{item.min_price}}</span></span>
<!--                                    <span class="commodity_price">￥<span>{{item.hh.toFixed(2)}}</span></span>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style='clear:both'></div>
                </div>
                <div class="noCommodity" v-if="allCommodity.total==0 && !loadshow">
                    <img src="../../assets/img/wushangpin.png" alt="暂无"/>
                </div>

            </div>
            <div class="block" v-show="!loadshow">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="25"
                        layout="total, prev, pager, next, jumper"
                        :total=allCommodity.total>
                </el-pagination>

            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "classify",
        // props: ['classIfy'],
        props:{
            'classIfy':Array,
        },
        data() {
            return {
                loadshow:false,
                loading: true,
                is_show: false,
                show: false,
                parentName: '',
                categoryId: '',
                current_parent_item: 0,
                current_children_item: 0,
                current_brand_item: 0,
                currentPage: 1,
                tradeType: '',
                classificationList: [],
                brandList: [],
                allCommodity: [],
                parentCategory: '',
                childrenCategory: '',
                brandCategory: '',
                search: '',
                pageSize: 25,
                conpage: 0,
                minPrice: '',
                maxPrice: '',
                bz:0,
                scrolltop:null,
                scrollToptimer:null,
                cate:''



            };
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                // 通过 `vm` 访问组件实例
                console.log(to,from)
                if(from.name==null){
                    clearInterval(vm.scrollToptimer)
                    localStorage.removeItem('scrolltop');
                    vm.scrolltop=null;
                }
            })
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            if(to.name!="detail"){
                localStorage.removeItem('commodityPage');
            }else {

                var scrolltop=document.body.scrollTop + document.documentElement.scrollTop
                localStorage.setItem('scrolltop',scrolltop);
            }

            if(to.name=='home'){
                localStorage.removeItem('tradeType');
                localStorage.removeItem('categoryId');
                localStorage.removeItem('brandId');
                localStorage.removeItem('scrolltop');
            }
            clearInterval(this.scrollToptimer);
            console.log('hh',to,from);
            next();
        },
        beforeRouteUpdate (to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
            localStorage.removeItem('commodityPage');
            next();
        },

        created() {

            this.classificationList=this.classIfy;

            this.tradeType = this.$route.query.type_name ? this.$route.query.type_name : '';
            this.categoryId = this.$route.query.category_id ? this.$route.query.category_id : '';
            this.brandCategory = this.$route.query.brand_id ? this.$route.query.brand_id : '';
            this.search = this.$route.query.search ? this.$route.query.search : '';
            this.bz = this.$route.query.bz ? this.$route.query.bz : '';
            this.parentCategory = this.categoryId;
            localStorage.setItem('tradeType',this.tradeType);
            if(this.bz=='bz'){
                this.brandCategory = this.$route.query.brand_id ? this.$route.query.brand_id : '';
            }

           if(localStorage.getItem("commodityPage")){
               this.currentPage= parseInt(localStorage.getItem("commodityPage"))
           }
           if(localStorage.getItem("scrolltop")){
               this.scrolltop=localStorage.getItem("scrolltop");

           }
            if(localStorage.getItem("categoryId")){
                this.cate=localStorage.getItem("categoryId");

            }

            this.getClassify();

        },

        mounted(){
            this.$nextTick(()=>{
                if(this.scrolltop){

                   this.scrollToptimer = setInterval(()=>{
                       let speed = parseInt(this.scrolltop) / 4;

                        if (document.documentElement.scrollTop != this.scrolltop) {
                            document.documentElement.scrollTop += speed;
                        } else {
                            document.documentElement.scrollTop += speed;
                        }
                       console.log(document.documentElement.scrollTop,this.scrolltop)
                        if (document.documentElement.scrollTop >= this.scrolltop ) {
                            clearInterval(this.scrollToptimer);
                        }

                    }, 30);
                }
            });

        },
        watch: {
            $route: function (newVal,oldVal) {

                this.tradeType = newVal.query.type_name ? newVal.query.type_name : '';
                localStorage.setItem('tradeType',this.tradeType);
                this.categoryId = newVal.query.category_id ? newVal.query.category_id : '';
                this.brandCategory = newVal.query.brand_id ? newVal.query.brand_id : '';
                this.search = newVal.query.search ? newVal.query.search : '';
                this.bz = newVal.query.bz ? newVal.query.bz : '';
                this.currentPage=1;
                if( this.brandCategory == ''){
                    this.current_brand_item=0;
                }
                if (this.categoryId =='' ) {
                    this.current_parent_item = 0;
                    // this.current_children_item = 0;
                    // this.current_brand_item = 0;
                    this.is_show = false;
                    this.parentName = '';
                }
                if(this.bz=='bz'){
                    this.brandCategory='';
                    this.current_parent_item=null;
                    this.current_children_item=null;
                    this.current_brand_item=null;
                }
                if(this.bz=='fl'){
                    this.current_children_item=0;
                    this.current_brand_item=0;
                    this.brandCategory=''
                }

                this.listGet();
            },
            classIfy(newval,oldval){
                if(newval){
                    this.classificationList=newval;
                }
            }
        },
        methods: {
            getClassify() {
                this.$HttpGet("/index.php?s=/admin/goods/get_category_List").then(res => {
                    this.classificationList = res.data;
                    this.getList(this.cate);
                    this.listGet();
                    if(this.bz=='bz'){
                        this.brandCategory='';
                        this.current_parent_item=null;
                        this.current_children_item=null;
                        this.current_brand_item=null;
                    }
                })
            },
            isNumber(val) {
                var regPos = /^\d+(\.\d+)?$/; //非负浮点数
                var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
                if (regPos.test(val) || regNeg.test(val)) {
                    return true;
                } else {
                    return false;
                }
            },
                moneyArea()
                {
                    const min = this.minPrice;
                    const max = this.maxPrice;
                    if (this.isNumber(min) && this.isNumber(max)) {
                        this.listGet();
                    } else {
                        this.$notifyError('请输入正确的价格！')
                    }

                }
            ,
                gopage(data)
                {
                    if (data == 'next') {
                        this.currentPage = this.currentPage + 1;
                    } else {
                        this.currentPage = this.currentPage - 1;
                    }
                    if (this.currentPage > this.conpage || this.currentPage <= 0) {
                        return false;
                    }
                    localStorage.setItem("commodityPage", this.currentPage);
                    this.listGet();
                }
            ,
                open()
                {
                    this.show = !this.show;
                }
            ,
                topTitle()
                {
                    this.$emit('chang');
                    this.current_parent_item = 0;
                    this.current_children_item = 0;
                    this.current_brand_item = 0;
                    this.is_show = false;
                    this.parentName = '';
                    var url = `/index/commodity/classify?category_id=&type_name=${this.tradeType}&search=&brand_id=`;
                    this.$router.push({path: url});
                    // this.$HttpGet("/index.php?s=/admin/goods/index", {
                    //     'category_id': '',
                    //     'type_name': this.tradeType,
                    //     'search': '',
                    //     'brand_id': ''
                    // }).then((res) => {
                    //     this.allCommodity = res.data;
                    // });
                },
                getList(categoryId)
                {
                    this.$HttpGet("/index.php?s=/admin/brand/index", {
                        "total": 100,
                        'category_id': categoryId,
                    }).then((res) => {
                        this.brandList = res.data;

                        for(let i=0;i<this.brandList.length;i++){
                            if(this.brandCategory == this.brandList[i].brand_id){
                                this.current_brand_item = i+1;
                            }
                        }
                    });


                },
                listGet() {

                    this.loadshow=true;
                    for (let i = 0; i < this.classificationList.length; i++) {
                        if (this.categoryId == this.classificationList[i].category_id) {
                            this.parentName = this.classificationList[i].name;
                            this.current_parent_item = i + 1;

                            if ( this.classificationList[i].child && this.classificationList[i].child.length > 0) {
                                this.is_show = true
                            }
                            break;
                        }
                        if(this.classificationList[i].child != undefined){
                            for(var j=0;j<this.classificationList[i].child.length;j++){
                                if (this.categoryId == this.classificationList[i].child[j].category_id) {
                                    this.parentCategory=this.classificationList[i].category_id;
                                    this.current_parent_item = i + 1;
                                    this.current_children_item= j + 1;
                                    this.is_show = true;
                                    break;
                                }
                            }
                        }


                    }

                    this.$HttpGet("/index.php?s=/admin/goods/index", {
                        'category_id': this.categoryId,
                        'type_name': this.tradeType,
                        'search': this.search,
                        'brand_id': this.brandCategory,
                        'page': this.currentPage,
                        'pageSize': this.pageSize,
                        'min_price':this.minPrice,
                        'max_price':this.maxPrice
                    }).then((res) => {
                        for(let i=0;i<res.data.data.length;i++){
                            let goods_sku=res.data.data[i].goods_sku.spec_sku_id.split("_");
                            for(let j=0;j<goods_sku.length;j++){
                                for(let m=0;m<res.data.data[i].spec_rel.length;m++){
                                    if((goods_sku[j]==res.data.data[i].spec_rel[m].spec_value_id) && res.data.data[i].spec_rel[m].spec.spec_name=="数量"){
                                        res.data.data[i].hh=parseFloat(res.data.data[i].goods_sku.goods_price) / parseFloat(res.data.data[i].spec_rel[m].spec_value);
                                        break;
                                    }
                                }
                            }
                        }
                        console.log(res.data.data)
                        this.allCommodity = res.data;

                        this.conpage = this.allCommodity.last_page;
                        this.loadshow=false;




                    });
                }
            ,
                goTo(url)
                {

                    this.$router.push({path: url});
                }
            ,
                goParent(index, categoryId)
                {
                    this.$emit('chang')
                    this.current_brand_item=0;
                    this.currentPage=1;
                    if(index==0){
                        categoryId='';
                    }
                    localStorage.setItem('categoryId',categoryId);
                    localStorage.setItem('brandId','');
                    this.brandCategory=''
                    var url = `/index/commodity/classify?category_id=${categoryId}&type_name=${this.tradeType}&search=&brand_id=${this.brandCategory}`;
                    this.current_parent_item = index;
                    this.current_children_item = 0;
                    this.parentCategory = categoryId;
                    if (index != 0) {
                        this.is_show = true;
                    } else {
                        this.is_show = false;
                    }
                    this.getList(categoryId)
                    this.$router.push({path: url});

                }
            ,
                goChildren(index, categoryId)
                {

                    this.currentPage=1;
                    this.current_brand_item=0;
                    if (index == 0) {
                        categoryId = this.parentCategory
                    }
                    localStorage.setItem('categoryId',categoryId);
                    var url = `/index/commodity/classify?category_id=${categoryId}&type_name=${this.tradeType}&search=&brand_id=${this.brandCategory}`;
                    this.current_children_item = index;
                    this.childrenCategory = categoryId;
                    this.getList(categoryId)
                    this.$router.push({path: url});
                }
            ,
                goBrand(index, brandId)
                {

                    this.currentPage=1;
                    if(index==0){
                        brandId=''
                    }
                    localStorage.setItem('brandId',brandId);
                    this.current_brand_item = index;
                    this.brandCategory = brandId;
                    var categoryId = '';
                    categoryId=localStorage.getItem('categoryId');

                    var url = `/index/commodity/classify?category_id=${categoryId}&type_name=${this.tradeType}&search=&brand_id=${brandId}`;
                    this.$router.push({path: url});


                }
            ,

                handleSizeChange(val)
                {
                    console.log(`每页 ${val} 条`);
                }
            ,
                handleCurrentChange(val)
                {

                    this.currentPage = val;
                    localStorage.setItem("commodityPage", this.currentPage);
                    this.listGet()
                }
            ,
            },
        };
</script>

<style lang="scss" scoped>
    .is_active {
        color: #3a62ca;
    }

    .dip {
        height: auto !important;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .sho {
        height: 90px !important;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .classify {
        width: 100%;
        padding-top: 20px;
        margin: 0 auto;

        .classif_main {
            width: 1020px;
            margin: 0 auto;

            .top_list {
                width: 100%;
                display: flex;
                align-items: center;
                margin-bottom: 20px;

                .top_title {
                    width: 80px;
                    height: 20px;
                    line-height: 20px;
                }

                .top_type {
                    /*width: 50px;*/
                    height: 20px;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                    border-radius: 5px;
                    text-align: center;
                    line-height: 20px;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    cursor: pointer;
                    color: #000000;
                    padding-left: 10px;
                    padding-right: 10px;
                    img{
                        margin-bottom: 2px;
                        margin-left: 2px;
                    }
                }
                .top_type:hover{
                    color: red;
                    border: 1px solid #E93030;
                    img{
                        content:url('../../assets/img/index/reddele.png');
                    }
                }
            }

            .category_list {
                .parent_list {
                    padding-left: 20px;
                }

                .parent_list,
                .children_list,
                .brand {
                    position: relative;
                    display: flex;
                    background: #ffffff;

                    .open {
                        position: absolute;
                        right: 10px;
                        top: 7px;

                        /deep/ .el-button {
                            background-color: rgba(0, 0, 0, 0);
                            border: 0px;
                            color: black;
                        }
                    }

                    .openup {
                        /deep/ .el-button {
                            background-color: rgba(0, 0, 0, 0);
                            border: 0px;
                            color: blue;
                        }
                    }

                    .title {
                        width: 45px;
                        padding: 0px 0;
                        line-height: 52px;
                    }

                    .type {
                        width: 940px;
                        line-height: 52px;

                        a {
                            display: inline-block;
                            padding: 0px 15px;
                        }

                        a:hover {
                            color: #3a62ca;
                        }
                    }
                }

                .children_list {
                    background: rgba($color: #385cc8, $alpha: 0.05);
                    padding-left: 80px;
                }

                .brand, .parent_list {
                    padding: 10px 20px;
                    margin-top: 10px;

                    .type, .title {
                        line-height: 30px;
                        overflow: hidden;
                    }
                }

                .children_list {
                    .type, .title {
                        line-height: 30px;

                    }
                }
            }

            .priceArea {
                width: 100%;
                height: 50px;
                background: #ffffff;
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .area {
                    display: flex;
                    position: relative;
                    input:focus{
                        border: 1px solid #E93030;
                    }
                    .moneLeft{
                        position: absolute;
                        top: 3px;
                        left: 25px;
                    }
                    .moneRight{
                        position: absolute;
                        top: 3px;
                        left: 135px;
                    }
                    .money {
                        width: 70px;
                        height: 24px;
                        background: #fafafa;
                        border: 1px solid #e5e5e5;
                        border-radius: 5px;
                        color: #838fa1;
                        padding-left: 20px;

                    }

                    .money_left {
                        margin-left: 20px;
                    }

                    .line {
                        width: 8px;
                        height: 2px;
                        border-top: solid #000000 1px;
                        margin: 12px 5px;
                    }

                    .ok {
                        width: 50px;
                        height: 24px;
                        background: #ffffff;
                        border: 1px solid #e5e5e5;
                        border-radius: 5px;
                        text-align: center;
                        line-height: 24px;
                        margin-left: 10px;
                        cursor: pointer;
                    }
                    .ok:hover{
                        background: rgba(233,48,48,0.8);
                        color: #ffffff;
                    }
                }

                .page {
                    position: relative;
                    right: 20px;
                    display: flex;
                    line-height: 26px;

                    .butt {
                        width: 24px;
                        height: 24px;
                        background: #ffffff;
                        border: 1px solid #e5e5e5;
                        border-radius: 50%;
                        line-height: 24px;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                    }
                    .buttLeft:hover{
                        background: rgba(#3A61CA,0.2);
                        img{
                            content: url("../../assets/img/index/blueleft.png");
                        }
                    }
                    .buttRight:hover{
                        background: rgba(#3A61CA,0.2);
                        img{
                            content: url("../../assets/img/index/blueright.png");
                        }
                    }
                }
            }
            #main{
                .loadingBox {
                    height: 100px;
                    margin-top: 50px;
                    position: relative;
                    /deep/ .el-loading-mask {
                        background: none;
                        .el-icon-loading {
                            font-size: 30px;
                        }
                    }
                }
            }
        }

        .block {
            position: relative;
            display: flex;

            margin-top: 20px;
            padding-bottom: 40px;
            justify-content: flex-end;

        }
    }

    #main {
        position: relative;
        width: 1020px;
        margin-top: 20px;
        margin: 0 auto;
    }

    .main_list {
        position: relative;
        margin-bottom: 24px;
    }
    .noCommodity{
        display: flex;
        justify-content: center;
        margin-top: 90px;
    }

    .main_list_title {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        margin-bottom: 24px;
    }

    .main_list_list {
    }
    .main_list_list_individual {
        float: left;
        width: 194px;
        height: 290px;
        background: #ffffff;
        margin: 10px 10px 0 0;
        border-radius: 5px;
        box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.14);
        cursor: pointer;
        &:last-child{
            margin: 10px 0 0 0;
        }
        .main_list_img {
            width: 194px;
            height: 201px;

            border-radius: 5px 5px 0 0;
            overflow: hidden;
            img {
                /*height: 200px;*/
                /*width: 166px;*/

                max-width: 166px;
                max-height: 200px;
                margin: 15px auto;
                display: block;
            }
        }
        .main_list_details {
            /*height: 89px;*/
            box-sizing: border-box;
            padding-left: 11px;
            padding-right: 11px;
            margin-top: 15px;
            margin-bottom: 15px;
            color: #000;
            div {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
                -webkit-line-clamp: 2; /* 控制最多显示几行 */
                -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
                max-height: 40px;
                &:first-child{
                    max-height: 40px;
                }
            }
            .commodity_type {
                display: inline-block;
                width: 59px;
                height: 16px;
                background: #e93e5d;
                border-radius: 8px;
                font-size: 11px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 16px;
                text-align: center;
                margin-right: 5px;
            }
            .bonded {
                background: #2CCE30;
            }
            .direct {
                background: #FDA95E;
            }
            .commodity_title {
                font-size: 13px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #000000;
                .commodity_price {
                    font-size: 15px;
                    font-family: PingFang SC;
                    font-weight: 1000;
                    color: #ea3030;
                    span {
                        font-size: 19px;
                    }
                }
            }
        }
    }
    .commodity_type.bonded {
        background: #2CCE30;
    }

    .commodity_type.direct {
        background: #fda95e;
    }
</style>
